<template>
  <div class="app-container">  
      <el-form ref="filterForm" :model="formData" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="账户" prop="bankcardID">
           <el-select v-model="formData.bankcardID" remote :remote-method="onBankcardQuery" filterable @change="onBankcardSelected($event)" placeholder="请选择">
            <el-option
              v-for="bankcard in bankcardOptions"
              :key="bankcard.ID"
              :label="bankcard.fullname"
              :value="bankcard.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科目" prop="subjectID">
           <el-select v-model="formData.subjectID" remote :remote-method="onSubjectQuery" filterable @change="onSubjectSelected($event)" placeholder="请选择">
            <el-option
              v-for="subject in subjectOptions"
              :key="subject.ID"
              :label="subject.title"
              :value="subject.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支出类型" prop="magic">
          
      <el-radio-group v-model="formData.relationType" @change="onRelationTypeSelected($event)">
        <el-radio-button label="0">默认</el-radio-button>
        <el-radio-button label="1003">还信用卡</el-radio-button>
        <el-radio-button label="1002">购入期货期权</el-radio-button>
        <el-radio-button label="1001">期货期权手续费</el-radio-button>
      </el-radio-group>
        </el-form-item>
        <el-form-item label="债务" prop="liabilities" v-if="formData.relationType == 1003">
           <el-select v-model="liabilitiesForm.liabilitiesID" remote :remote-method="onLiabilitiesQuery" filterable @change="onLiabilitiesSelected($event)" placeholder="请选择">
            <el-option
              v-for="liabilities in liabilitiesOptions"
              :key="liabilities.ID"
              :label="liabilities.title"
              :value="liabilities.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支出摘要" prop="title">
          <el-input v-model="formData.title" clearable placeholder="支出摘要" maxlength="80" show-word-limit/>
        </el-form-item>
        <el-form-item label="支出金额" prop="amount">
          <el-input v-model="formData.amount" clearable placeholder="支出金额" maxlength="80" show-word-limit/>
        </el-form-item>
        <el-form-item label="支出日期" prop="happenDate">
          <el-date-picker 
          clearable
            v-model="formData.happenDate"
            type="date">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="formData.remark" maxlength="200" show-word-limit clearable placeholder="备注"/>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="14">          
            <el-button type="info" @click="onFormSaveButton()">保存</el-button>
            <el-button type="primary" @click="onFormSaveAndNewButton()">保存并新建</el-button>
            <el-button type="primary" @click="onFormNewButton()">新建</el-button>
        </el-col>
        <el-col :span="6" style="text-align:right;">          
          <el-button type="warning" @click="onFormCannelButton()">取消</el-button>
          <el-button type="danger" v-if="expensesID > 0" @click="onFormRemoveButton()">删除</el-button>
        </el-col>
      </el-row>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import {getExpensesDetail,saveExpenses,removeExpenses} from '@/api/finance/expenses'
import {getLiabilitiesList} from '@/api/finance/liabilities'
import {getBankcardList} from '@/api/finance/bankcard'
import {getSubjectList} from '@/api/finance/subject'



export default {
  name: 'expensesForm',
  components: {  },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      expensesID:undefined,
      formData: {
      },
      liabilitiesOptions:[],
      liabilitiesForm:{
        keyword:""
      },
      bankcardOptions:[],
      bankcardForm:{
        keyword:""
      },
      subjectOptions:[],
      subjectForm:{
        keyword:""
      },
      rules:{
         expensesName: [
            { required: true, message: '请输入机构名称', trigger: 'blur' },
            { min: 3, max: 80, message: '长度在 3 到 80 个字符', trigger: 'blur' }
          ],
         establishDate: [
            { required: true, message: '请选择/输入成立日期', trigger: 'blur' },
            { len: 10, message: '日期应为10位', trigger: 'blur' }
          ],
         expensesRegAddress: [
            { required: true, message: '请输入机构注册地址', trigger: 'blur' },
            { min: 2, max: 80, message: '长度在 2 到 80 个字符', trigger: 'blur' }
          ],
      }
    }
  },
  created() {
    let expensesID = this.$route.query.expensesID 
    expensesID = parseInt(expensesID)
    if(isNaN(expensesID) == false){
      this.expensesID = expensesID
      this.getInfo()
    }
    this.getLiabilitiesList()
    this.getBankcardList()
    this.getSubjectList()
  },
  methods: {
    getInfo:function(){
      let _this = this;
      getExpensesDetail({
        "expensesID":this.expensesID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.formData = response.data
            _this.formData.expensesID = _this.expensesID
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onRelationTypeSelected:function(){
      this.formData.relationID = 0
    },
    onLiabilitiesQuery:function(liabilitiesName){
      console.log(liabilitiesName)
      let _this = this;
      _this.liabilitiesForm.keyword = liabilitiesName
      _this.getLiabilitiesList()
    },
    onLiabilitiesSelected:function(liabilitiesID){
      console.log(">>>",liabilitiesID)
      this.formData.relationID = liabilitiesID
    },
    getLiabilitiesList:function(){
      let _this = this;
      getLiabilitiesList({
        "keyword":this.liabilitiesForm.keyword
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.liabilitiesOptions = response.data.list
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onBankcardQuery:function(liabilitiesName){
      console.log(liabilitiesName)
      let _this = this;
      _this.liabilitiesForm.keyword = liabilitiesName
      _this.getBankcardList()
    },
    onBankcardSelected:function(liabilitiesID){
      //console.log(">>>",liabilities)
      //this.formData.relationID = liabilitiesID
    },
    getBankcardList:function(){
      let _this = this;
      getBankcardList({
        "keyword":this.liabilitiesForm.keyword
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.bankcardOptions = response.data.list
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onSubjectQuery:function(liabilitiesName){
      console.log(liabilitiesName)
      let _this = this;
      _this.liabilitiesForm.keyword = liabilitiesName
      _this.getSubjectList()
    },
    onSubjectSelected:function(liabilitiesID){
      //this.formData.relationID = liabilitiesID
    },
    getSubjectList:function(){
      let _this = this;
      getSubjectList({
        "keyword":this.liabilitiesForm.keyword
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.subjectOptions = response.data.list
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormSaveButton:function(){
      let _this = this;
      this.$refs['filterForm'].validate((valid) => {
        if (valid) {
            saveExpenses(_this.formData).then((response) => {
              console.log("getList",response)
                if (response.code === 200) {
                  _this.$message({
                    message: "成功",
                    type: 'error'
                  })
                } else {
                  _this.$message({
                    message: response.msg,
                    type: 'error'
                  })
                }
            })
        } else {
            console.log('error submit!!');
            return false;
        }
      })
    },
    onFormSaveAndNewButton:function(){
      let _this = this;
      saveExpenses(_this.formData).then((response) => {
          if (response.code === 200) {
            _this.onFormNewButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormNewButton:function(){
        this.formData = {

        }
    },
    onFormCannelButton:function(){
      this.$router.push({ path: 'expenses'})
    },
    onFormRemoveButton:function(){
      let _this = this;
      removeExpenses({
        "expensesID":this.expensesID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.onFormCannelButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
<style>
</style>